<template>
	<div class="position_rel padding_top45 padding_bottom60">
		<div class="tab_header border_bot_bf line_height40 color666 background_fff">
			<span @click="selectTab(index)" v-for="(item, index) in tabList" :class="{selected: index == tabNum}">
				{{item}}
			</span>
		</div>
		<mt-tab-container v-model="tabContainerActive">
			<mt-tab-container-item id="tab-container0">
				<div class="cart_content clearfix" v-for="item in OrderList">
					<div class="cart_shop clearfix position_rel">
						<div class="shop_info clearfix">
							<span class="shop_name">订单编号：{{item.Id}}</span>
						</div>
						<!--<div v-show="item.OrderStatus=='已取消'||item.OrderStatus=='已完成'" @click="delOrderBtn(item.Id)" class="cart_del clearfix">
							<div class="del_top">
							</div>
							<div class="del_bottom">
							</div>
						</div>-->
						<div class="cart_free clearfix">
							<span class="free_tip color999">{{item.OrderStatus}}</span>
						</div>
					</div>
					<div v-for="etem in item.ProductsList" class="cart_item background_ea border_bot_999">
						<div class="cart_detial_box clearfix background_ea">
							<a href="javascipt:void(0)" class="cart_product_link background_ea">
								<img v-lazy="root + etem.ImgPath" alt="">
							</a>
							<div class="item_names">
								<a href="javascipt:void(0)">
									<span>{{etem.ProductName}}</span>
								</a>
							</div>
							<div class="cart_weight color999">
								<i v-for="ftem in etem.SKUContent" class="my_weigth ">
									{{ftem.AttributeName}}:{{ftem.ValueStr}}
								</i>
							</div>
						</div>
						<input @click="goComment(item.Id, etem)" v-if="item.OrderStatus==='已完成'&&etem.IsRated===0" type="button" class="order_operation_btn2" value="去评价" />
					</div>
					<div class="cart_shop clearfix border_bot_dcdcdc">
						<div class="cart_free clearfix padding_right10">
							<span v-if="item.OrderStatus=='等待付款'" class="free_tip color666">需付款：￥{{item.RealPay}}</span>
							<span v-else class="free_tip color666">实付款：￥{{item.RealPay}}</span>
						</div>
					</div>
					<div class="cart_shop clearfix">
						<div class="cart_free clearfix padding_right10">
							<!--<input v-if="item.OrderStatus=='已取消'" type="button" class="order_operation_btn" value="再次购买" />-->
							<input @click="goPay(item)" v-if="item.OrderStatus=='等待付款'" type="button" class="order_operation_btn" value="去支付" />
							<input @click="cancelOrder(item)" v-if="item.OrderStatus=='等待付款'" type="button" class="order_operation_btn" value="取消订单" />
							<!--<input @click="checkLogistics(item)" v-else-if="item.OrderStatus=='等待发货'" type="button" class="order_operation_btn" value="查看物流" />-->
							<input @click="changeOrderStatus(item)" v-if="item.OrderStatus=='等待收货'" type="button" class="order_operation_btn" value="确认收货" />
							<input @click="goComment(item)" v-if="item.OrderStatus=='等待评价'" type="button" class="order_operation_btn" value="去评价" />
							<!--<input v-else-if="item.OrderStatus=='已评价'" type="button" class="order_operation_btn" value="再次评价" />-->
							<input @click="checkLogistics(item)" v-if="item.OrderStatus=='等待收货'" type="button" class="order_operation_btn" value="查看物流" />

						</div>
					</div>
				</div>
			</mt-tab-container-item>

			<mt-tab-container-item id="tab-container1">
				<div class="" v-for="item in OrderList">
					<div v-if="item.OrderStatus=='等待付款'" class="cart_content clearfix">
						<div class="cart_shop clearfix position_rel">
							<div class="shop_info clearfix">
								<span class="shop_name">订单编号：{{item.Id}}</span>
							</div>
							<div class="cart_free clearfix">
								<span class="free_tip color999">{{item.OrderStatus}}</span>
							</div>
						</div>
						<div v-for="etem in item.ProductsList" class="cart_item background_ea border_bot_999">
							<div class="cart_detial_box clearfix background_ea">
								<a href="javascipt:void(0)" class="cart_product_link background_ea">
									<img v-lazy="root + etem.ImgPath" alt="">
								</a>
								<div class="item_names">
									<a href="javascipt:void(0)">
										<span>{{etem.ProductName}}</span>
									</a>
								</div>
								<div class="cart_weight color999">
									<i v-for="ftem in etem.SKUContent" class="my_weigth ">
										{{ftem.AttributeName}}:{{ftem.ValueStr}}
									</i>
								</div>
							</div>
						</div>
						<div class="cart_shop clearfix border_bot_dcdcdc">
							<div class="cart_free clearfix padding_right10">
								<!--<span class="free_tip color666">共 {{item.ProductsList.length}} 件商品</span>-->
								<span class="free_tip color666">需付款：￥{{item.RealPay}}</span>
							</div>
						</div>
						<div class="cart_shop clearfix">
							<div class="cart_free clearfix padding_right10">
								<input @click="goPay(item)" type="button" class="order_operation_btn" value="去支付" />
								<input @click="cancelOrder(item)" type="button" class="order_operation_btn" value="取消订单" />

								<!--<input type="button" class="order_operation_btn" value="取消订单" />-->
							</div>
						</div>
					</div>
				</div>
			</mt-tab-container-item>
			<mt-tab-container-item id="tab-container2">
				<div class="" v-for="item in OrderList">
					<div v-if="item.OrderStatus=='等待发货'" class="cart_content clearfix">
						<div class="cart_shop clearfix position_rel">
							<div class="shop_info clearfix">
								<span class="shop_name">订单编号：{{item.Id}}</span>
							</div>
							<div class="cart_free clearfix">
								<span class="free_tip color999">{{item.OrderStatus}}</span>
							</div>
						</div>
						<div v-for="etem in item.ProductsList" class="cart_item background_ea border_bot_999">
							<div class="cart_detial_box clearfix background_ea">
								<a href="javascipt:void(0)" class="cart_product_link background_ea">
									<img v-lazy="root + etem.ImgPath" alt="">
								</a>
								<div class="item_names">
									<a href="javascipt:void(0)">
										<span>{{etem.ProductName}}</span>
									</a>
								</div>
								<div class="cart_weight color999">
									<i v-for="ftem in etem.SKUContent" class="my_weigth ">
										{{ftem.AttributeName}}:{{ftem.ValueStr}}
									</i>
								</div>
							</div>
						</div>
						<div class="cart_shop clearfix border_bot_dcdcdc">
							<div class="cart_free clearfix padding_right10">
								<!--<span class="free_tip color666">共 {{item.ProductsList.length}} 件商品</span>-->
								<span class="free_tip color666">实付款：￥{{item.RealPay}}</span>
							</div>
						</div>
						<div class="cart_shop clearfix">

						</div>
					</div>
				</div>
			</mt-tab-container-item>
			<mt-tab-container-item id="tab-container3">
				<div class="" v-for="item in OrderList">
					<div v-if="item.OrderStatus=='等待收货'" class="cart_content clearfix">
						<div class="cart_shop clearfix position_rel">
							<div class="shop_info clearfix">
								<span class="shop_name">订单编号：{{item.Id}}</span>
							</div>
							<div class="cart_free clearfix">
								<span class="free_tip color999">{{item.OrderStatus}}</span>
							</div>
						</div>
						<div v-for="etem in item.ProductsList" class="cart_item background_ea border_bot_999">
							<div class="cart_detial_box clearfix background_ea">
								<a href="javascipt:void(0)" class="cart_product_link background_ea">
									<img v-lazy="root + etem.ImgPath" alt="">
								</a>
								<div class="item_names">
									<a href="javascipt:void(0)">
										<span>{{etem.ProductName}}</span>
									</a>
								</div>
								<div class="cart_weight color999">
									<i v-for="ftem in etem.SKUContent" class="my_weigth ">
										{{ftem.AttributeName}}:{{ftem.ValueStr}}
									</i>
								</div>
							</div>
						</div>
						<div class="cart_shop clearfix border_bot_dcdcdc">
							<div class="cart_free clearfix padding_right10">
								<!--<span class="free_tip color666">共 {{item.ProductsList.length}} 件商品</span>-->
								<span class="free_tip color666">实付款：￥{{item.RealPay}}</span>
							</div>
						</div>
						<div class="cart_shop clearfix">
							<div class="cart_free clearfix padding_right10">
								<input @click="changeOrderStatus(item)" type="button" class="order_operation_btn" value="确认收货" />
								<input @click="checkLogistics(item)" type="button" class="order_operation_btn" value="查看物流" />
							</div>
						</div>
					</div>
				</div>
			</mt-tab-container-item>
			<mt-tab-container-item id="tab-container4">
				<div class="" v-for="item in OrderList">
					<div v-if="item.OrderStatus=='等待评价'" class="cart_content clearfix">
						<div class="cart_shop clearfix position_rel">
							<div class="shop_info clearfix">
								<span class="shop_name">订单编号：{{item.Id}}</span>
							</div>
							<div class="cart_free clearfix">
								<span class="free_tip color999">{{item.OrderStatus}}</span>
							</div>
						</div>
						<div v-for="etem in item.ProductsList" class="cart_item background_ea border_bot_999">
							<div class="cart_detial_box clearfix background_ea">
								<a href="javascipt:void(0)" class="cart_product_link background_ea">
									<img v-lazy="root + etem.ImgPath" alt="">
								</a>
								<div class="item_names">
									<a href="javascipt:void(0)">
										<span>{{etem.ProductName}}</span>
									</a>
								</div>
								<div class="cart_weight color999">
									<i v-for="ftem in etem.SKUContent" class="my_weigth ">
										{{ftem.AttributeName}}:{{ftem.ValueStr}}
									</i>
								</div>
							</div>
							<input @click="goComment(item.Id, etem)" v-if="item.OrderStatus==='已完成'&&etem.IsRated===0" type="button" class="order_operation_btn2" value="去评价" />
						</div>
						<div class="cart_shop clearfix border_bot_dcdcdc">
							<div class="cart_free clearfix padding_right10">
								<!--<span class="free_tip color666">共 {{item.ProductsList.length}} 件商品</span>-->
								<span class="free_tip color666">实付款：￥{{item.RealPay}}</span>
							</div>
						</div>
						<div class="cart_shop clearfix">
							<!--<div class="cart_free clearfix padding_right10">
								<input @click="goComment(item)" type="button" class="order_operation_btn" value="去评价" />
							</div>-->
						</div>
					</div>
				</div>
			</mt-tab-container-item>
		</mt-tab-container>
		<yd-actionsheet :items="myItems1" v-model="show1" cancel="取消"></yd-actionsheet>
	</div>
</template>
<script>
	import { TabContainer, TabContainerItem } from 'mint-ui';
	import { Toast } from 'mint-ui';
	import { MessageBox } from 'mint-ui';
	export default {
		created() {
			let _this = this
			console.log('_this.$route.query', _this.$route.query)
			var orderStatus = _this.$route.query.orderStatus
			switch(orderStatus) {
				case 6:
					_this.tabNum = 0
					_this.tabContainerActive = 'tab-container' + 0
					break;
				case 1:
					_this.tabNum = 1
					_this.tabContainerActive = 'tab-container' + 1
					break;
				case 3:
					_this.tabNum = 2
					_this.tabContainerActive = 'tab-container' + 2
					break;
				case 4:
					_this.tabNum = 3
					_this.tabContainerActive = 'tab-container' + 3
					break;
				case 0:
					_this.tabNum = 4
					_this.tabContainerActive = 'tab-container' + 4
					break;
				default:
					break;
			}
		},
		data() {
			return {
				root: this.root,
				tabContainerActive: 'tab-container0',
				tabList: ['全部', '待付款', '待发货', '待收货'],
				tabNum: 0,
				OrderList: [],
				show1: false,
				CloseReason: '',
				CanselOrderId: 0,
				myItems1: [{
						label: '选错商品了',
						callback: () => {
							this.CloseReason = '选错商品了'
							this.cancelOrderStatus()
						}
					},
					{
						label: '不想要了',
						callback: () => {
							this.CloseReason = '不想要了'
							this.cancelOrderStatus()

						}
					},
					{
						label: '其他',
						callback: () => {
							this.CloseReason = '其他'
							this.cancelOrderStatus()

						}
					}
				]
			}
		},
		mounted() {
			let _this = this
			_this.getOrderList()
		},
		methods: {
			selectTab(index) {
				var that = this
				that.tabNum = index
				that.tabContainerActive = 'tab-container' + index
			},
			getOrderList() {
				let _this = this
				_this.$http.get('/client/Orders', {
					orderByString: "CreateDate.descending",
					IsDelete: 0,
					limit: -1,
				}, localStorage.Authorization, res => {
					console.log('订单列表res', res)
					if(res.code === 200) {
						_this.OrderList = res.data.list
						_this.OrderStatus(_this.OrderList)
					} else if(res.code === 101) {
						localStorage.fromPath = _this.$route.fullPath
						_this.$router.push({
							path: '/login'
						})
					}
				})
			},
			OrderStatus(OrderList) {
				let _this = this
				for(var i = 0; i < OrderList.length; i++) {
					switch(OrderList[i].OrderStatus) {
						case 0:
							OrderList[i].OrderStatus = '已取消'
							break;
						case 1:
							OrderList[i].OrderStatus = '等待付款'
							break;
						case 2:
							OrderList[i].OrderStatus = '等待发货'
							break;
						case 3:
							OrderList[i].OrderStatus = '等待收货'
							break;
						case 4:
							OrderList[i].OrderStatus = '已完成'
							break;
						case 5:
							OrderList[i].OrderStatus = '已完成'
							break;
						default:
							break;
					}
				}
			},
			delOrderBtn(id) {
				let _this = this
				MessageBox.confirm('确定删除该订单？').then(action => {
					_this.$http.put('/client/Orders/' + id, {
						IsDelete: 1
					}, localStorage.Authorization, res => {
						console.log('删除订单res', res)
						if(res.code === 200) {
							Toast(res.data)
							setTimeout(function() {
								_this.$router.go(0)
							}, 1000)
						} else if(res.code === 101) {
							localStorage.fromPath = _this.$route.fullPath
							_this.$router.push({
								path: '/login'
							})
						}
					})
				}).catch(action => {

				})

			},
			goPay(item) {
				console.log('item', item)
				let _this = this
				_this.$router.push({
					path: '/checkstand',
					query: {
						OrderId: item.Id,
						totalPrice: item.OrderTotal
					}
				})
			},
			checkLogistics(item) {
				let _this = this
				_this.$router.push({
					path: '/logistics',
					query: {
						orderId: item.Id
					}
				})
			},
			changeOrderStatus(item) {
				let _this = this
				MessageBox.confirm('确定收货？').then(action => {
					_this.$http.put('/client/Orders/' + item.Id, {
						OrderStatus: 4
					}, localStorage.Authorization, res => {
						if(res.code === 200) {
							Toast(res.data)
							setTimeout(function() {
								_this.$router.go(0)
							}, 1000)
						} else if(res.code === 101) {
							localStorage.fromPath = _this.$route.fullPath
							_this.$router.push({
								path: '/login'
							})
						}
					})
				}).catch(action => {

				})

			},
			goComment(id, item) {
				let _this = this;
				_this.$router.push({
					path: '/commentProduct',
					query: {
						"OrderId": id,
						"item": item
					}
				})
			},
			cancelOrder(item) {
				let _this = this
				_this.show1 = true
				_this.CanselOrderId = item.Id
			},
			cancelOrderStatus() {
				let _this = this
				_this.$http.put('/client/Orders/' + _this.CanselOrderId, {
					OrderStatus: 0,
					CloseReason: _this.CloseReason
				}, localStorage.Authorization, res => {
					if(res.code === 200) {
						Toast(res.data)
						setTimeout(function() {
							_this.$router.go(0)
						}, 1000)
					} else if(res.code === 101) {
						localStorage.fromPath = _this.$route.fullPath
						_this.$router.push({
							path: '/login'
						})
					}
				})
			}
		}
	}
</script>
<style scoped="scoped">
	.footer {
		display: none;
	}
	
	.shop_info {
		margin-left: 10px!important;
		width: 70%;
	}
	
	.cart_item .cart_detial_box {
		margin-left: 10px;
	}
	
	.cart_detial_box .cart_product_link {
		width: 80px;
		height: 80px;
	}
	
	.cart_del {
		/*position: absolute;
		right: 11px;
		top: 12px;*/
		float: right;
		float: right;
		margin-top: 12px;
		margin-right: 10px;
		margin-left: 2px;
	}
	
	.cart_free {
		/*padding-right: 40px;*/
	}
	
	.cart_item {
		height: 100px;
		padding: 10px 0;
		border-bottom: none;
	}
	
	.order_operation_btn {
		padding: 3px 20px;
		border-radius: 5px;
		border: 1px solid #F23434;
		color: #F23434;
		background: #fff;
	}
	
	.order_operation_btn2 {
		position: absolute;
		bottom: 0;
		right: 0;
		padding: 3px 20px;
		border-radius: 5px;
		border: 1px solid #F23434;
		color: #F23434;
		background: #fff;
	}
	
	.tab_header {
		position: fixed;
		z-index: 100;
		width: 100%;
		top: 45px;
	}
	
	.cart_detial_box .cart_weight {
		padding-right: 15px;
	}
</style>